<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 引入公用样式 -->
    <link rel="stylesheet" href="/static/sass/common/ydui.css" />
    <link rel="stylesheet" href="/static/stylesheets/product/product_detail.css" />
    <!-- 引入自适应解决方案类库 -->
    <script src="/static/scripts/libs/ydui.flexible.js"></script>
</head>
<body>
    <div class="g-flexview">
        <!-- 主体内容开始 -->
        <section class="content_box" style="margin-bottom: 56px;">
            <div class="product-info">
                <div class="pro-logo">
                    <img  src="/static/assets/img/peach.png" alt="">
                </div>
                <div class="pro-title">
                    功夫桃黄桃罐头散打冠军黄磊代言一箱包邮
                </div>
                <div class="pro-price">
                    <span class="current-price">￥88.00</span>
                    <del class="old-price">￥114.00</del>
                </div>
                <div class="pro-detail">
                    <div id="goods_title">
                        <div class="pro-desc on">
                            商品详情
                        </div>
                        <div class="pro-desc">
                            商品评价
                        </div>
                    </div>
                    
                </div>
                <div id="goods_dis" class="pro-detail">
                    <div class="img-list">
                        <div class="img-box">
                            <img  src="/static/assets/img/peach.png" alt="">
                        </div>
                        <div class="img-box">
                            <img  src="/static/assets/img/peach.png" alt="">
                        </div>
                        <div class="img-box">
                            <img  src="/static/assets/img/peach.png" alt="">
                        </div>
                    </div>
                    <div class="assess-list"  id="J_List" style="display: none;">
                        <ul id="J_ListContent">
                            <!--<li>
                                <div class="userinfo">
                                    <img src="../../static/assets/img/peach.png" alt="">
                                    <h2>Sweet Dream</h2>
                                    <p>
                                        <i class="icon-star"></i>
                                        <i class="icon-star"></i>
                                        <i class="icon-star"></i>
                                        <i class="icon-star"></i>
                                        <i class="icon-star"></i>
                                    </p>
                                </div>
                                <div class="discp">
                                    <p>d开发时常用的字体图标；各图标大小均已调整为同等大小开发时常用的字体图标；各图标大小均已调整为同等大小 <span>今天20：00</span></p>
                                </div>
                            </li>-->
                            <li>
                                <div class="userinfo">
                                    <img src="../../static/assets/img/peach.png" alt="">
                                    <h2>Sweet Dream</h2>
                                    <p>
                                        <i class="icon-star"></i>
                                        <i class="icon-star"></i>
                                        <i class="icon-star"></i>
                                        <i class="icon-star"></i>
                                        <i class="icon-star gray"></i>
                                    </p>
                                </div>
                                <div class="discp">
                                    <p>d开发时常用的字体图标；各图标大小均已调整为同等大小开发时常用的字体图标；各图标大小均已调整为同等大小 </p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        <!-- 底部导航开始 -->
        <footer class="footer" style="overflow: hidden; width: 100%; height: 56px; position: fixed; bottom: 0; left: 0; background: #fff;">
            <div class="m-tabbar" style="padding: 3.5px;">
                <a href="/html/home/index.html" class="tabbar-item">
                    <span class="tabbar-icon">
                        <i class="icon-home-outline"></i>
                    </span>
                    <span class="tabbar-txt">商城</span>
                </a>
                <a href="/html/shopping_car/shopping_car.html" class="tabbar-item">
                    <span class="tabbar-icon">
                        <i class="icon-shopcart-outline"></i>
                        <span class="badge badge-danger">3</span>
                    </span>
                    <span class="tabbar-txt">购物车</span>
                </a>
            </div>
            <div class="right">
                <div class="shopping-car-btn">
                    加入购物车
                </div>
                <div class="current-buy">
                    立即购买
                </div>
            </div>
        </footer>
        <!-- 底部导航结束 -->
    <div id="dialog" class="product-box">
        <div class="product-dialog-main">
            <div class="pro-info">
                <div class="pro-img">
                    <img  src="/static/assets/img/peach.png" alt="">
                </div>
                <div class="pro-item">
                    <div class="title">
                        功夫桃黄桃罐头散打冠军黄磊代言一箱包邮
                    </div>
                    <div class="price">
                        ￥88.00
                    </div>
                </div>
            </div>
            <div class="count-info">
                <div class="count-type" id="type_btn">
                    <div class="type1-btn">
                        <span class="type_btn on">零买</span>
                    </div>
                    <div class="type2-btn">
                        <span class="type_btn">整箱买</span>
                    </div>
                </div>
                <div class="count-num">
                    <div class="text">
                        购买数量
                    </div>
                    <div class="num">
                        <span class="m-spinner" data-ydui-spinner="{input: '.J_Input', add: '.J_Add', minus: '.J_Del'}"><!-- 添加data-ydui-spinner属性并添加参数即可 -->
                            <a href="javascript:;" class="J_Del"></a>
                            <input type="text" class="J_Input" placeholder=""/>
                            <a href="javascript:;" class="J_Add"></a>
                        </span>

                    </div>
                    <div class="unit">
                        <span>罐</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="btn-box">
            <div class="submit-btn">
                确定
            </div>
        </div>
    </div>
    </div>


    <!-- 引入jQuery 2.0+ -->
    <script src="/static/scripts/libs/jquery.min.js"></script>
    <!-- 引入YDUI脚本 -->
    <script src="/static/scripts/libs/ydui.js"></script>
    <script>
            $('.shopping-car-btn').on('click',function(){
                $('#dialog').show();
            });
            $('.current-buy').on('click',function(){
                $('#dialog').show();
            });
            $('.submit-btn').on('click',function(){
                $('#dialog').hide();
                // xxxxxx
            });
        
        $('#type_btn').on('click', 'span', function(){
            $('#type_btn').find('span').removeClass('on')
            $(this).addClass('on')
            if($(this).html() == '零买'){
                $('.unit span').html('罐')    
            }else{
                $('.unit span').html('箱')  
            }
            
        })
        
        $('#goods_title').children('div').on('click', function(){
            var index = $(this).index();
            $(this).addClass('on').siblings().removeClass('on');
            $('#goods_dis').children().eq(index).show().siblings().hide()
        })
        
    </script>
    <script>
        /* 通过自定义的方法获取数据【通常是需要定义变量当前第几页page，和每页请求的记录数pageSize】 */
        var page = 1, size = 5;

        $('#J_List').infiniteScroll({
            pageSize: size,
            initLoad: true,
            loadingHtml: '<strong id="loading">加载中...</strong>', /* 当然也可以<img src="../img/loading.gif" /> */
            loadListFn: function () {
                var def = $.Deferred();

                /* 通过自定义的方法获取数据 */
                $.ajax({
                    url: 'http://ons.me/tools/dropload/json.php',
                    dataType: 'json',
                    data: { page: page, size: size },
                    success: function (ret) {
                        /* 假设ret.list为后端返回的列表数组 */

                        /* 用你喜欢的方法将获取到的数据拼接成HTML，然后插入；*/
                        /* 建议使用模板引擎，示例使用artTemplate；https://github.com/aui/artTemplate */
                        var shtml = '';
                        ret.map(function(item){
                            return shtml += `<li>
                                                <div class="userinfo">
                                                    <img src="../../static/assets/img/peach.png" alt="">
                                                    <h2>Sweet Dream</h2>
                                                    <p>
                                                        <i class="icon-star"></i>
                                                        <i class="icon-star"></i>
                                                        <i class="icon-star"></i>
                                                        <i class="icon-star"></i>
                                                        <i class="icon-star gray"></i>
                                                    </p>
                                                </div>
                                                <div class="discp">
                                                    <p>d开发时常用的字体图标；各图标大小均已调整为同等大小开发时常用的字体图标；各图标大小均已调整为同等大小 </p>
                                                </div>
                                            </li>`
                        })
                        console.log(ret)
                        $('#J_ListContent').append(shtml);

                        /* 获取数据，并插入页面后，调用resole，并传入当前获取的记录列表集合 */
                        if(ret.length == 0) {
                            $('#loading').html('数据加载完毕！')
                            return
                        };
                        def.resolve(ret);

                        /* 页码自增1 */
                        ++ page;
                    }
                });

                return def.promise();
            }
        });
    </script>
</body>

</html>
